<template>
    <div class="wrapper">
        <top-header title="编辑商品"></top-header>
        <scroller :show-scrollbar="false" class="content">
            <div>
                <div class="car_info">
                    <text class="car_info_name">商品名称</text>
                    <input type="text" class="car_info_input" v-model="form.name" placeholder="请输入商品名称"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">商品价格</text>
                    <input type="text" class="car_info_input" v-model="form.goodprice" placeholder="请输入商品价格(元)"/>
                </div>
            </div>
            <div>
                <div class="car_inf_img">
                    <text class="car_info_name">商品图片</text>
                    <text class="car_image iconfont" v-if="!form.pics" @click="upload()">&#xe71b;</text>
                    <image class="car_image" v-if="form.pics" :src="form.pics" @click="upload()"></image>
                </div>
            </div>
            <div>
                <div class="car_inf_img">
                    <text class="car_info_name">商品描述</text>
                    <textarea class="car_info_textarea" v-model="form.description" placeholder="请输入商品描述"></textarea>
                </div>
            </div>
            <div class="button">
                <wxc-button text="确认"
                    @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </scroller>
    </div>
</template>
<script>
import { WxcCheckboxList, WxcButton } from 'weex-ui';
const animation = weex.requireModule('animation')
import header from '../../common/header'
export default {
    components: { WxcCheckboxList, WxcButton, 
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            list: [],
            btnStyle: {
                'background-color': '#1E90FF',
            },
            form: {
                'id': '',
                'name': '',  // 商品名称
                'goodprice': '',  // 商品价格
                'pics': '',  // 商品图片
                'description': '',  // 商品描述
                'storeid': '',  // 店铺id
                'storename': '',  // 店铺名称
                'type': '2',  // 平台类型 类型  1 平台商品  2 店铺商品
            },
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.token = user.token
        let storeInfo = this.$storage.getSync('StoreInfo')
        // this.$notice.toast({message: storeInfo})
        this.form.storename = storeInfo.ownername
        this.form.storeid = storeInfo.id
        this.$router.getParams().then(resData => {
            console.log(resData)
            this.getGoods(resData)
        })
    },
    mounted () {
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        next () {
            if (this.validterParam()) {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'goods.update', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: this.form,
                }).then(resData => {
                    // 成功回调
                    this.isShowLoad = false;
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.back()
                    }
                    this.$notice.toast({ message: resData.errmsg})
                }, error => {
                    // 错误回调
                    this.isShowLoad = false;
                    console.log(error)
                })
            }   
                
        },
        // 上传图片
        upload () {
            this.$image.pickAndUpload({
                allowCrop: false,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                params: {},                  // 传递的参数
                header: {}                   // 自定义请求 header
            })
            .then(resData => {
                console.log(resData)    // [url1, url2...]
                this.form.pics = resData[0].data.url
            }, error => {
                console.log(error)
                this.$notice.toast({ message: '上传失败'})
            })
        },
        // 校验值
        validterParam () {
            if (!this.form['name']) {
                this.$notice.toast({ message: '请填写商品名称'})
                return false
            } else if (!this.form['goodprice']) {
                this.$notice.toast({ message: '请填写商品价格'})
                return false
            } else if (!this.form['pics']) {
                this.$notice.toast({ message: '请选择商品图片'})
                return false
            } else if (!this.form['description']) {
                this.$notice.toast({ message: '请填写商品描述'})
                return false
            }
            return true
        },
        // 查询商品
        getGoods (id) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'goods.read', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {'id': id},
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.form = resData.data
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
                
        },
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.content{
    background-color: #fff;
}

.cont_first{
    flex-direction: row;
    align-items: center;
    height: 80px;
}
.cont_fir1{
    width: 160px;
    text-align: center;
    color: #666;
}
.cont_provice{
    width: 260px;
}

.car_image_angle{
    color: #666;
    height: 60px;
    line-height: 60px;
    margin: 10px;
}
.car_inf_img{
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
}
.car_image{
    font-size: 150px;
    line-height: 400px;
    height: 400px;
    width: 460px;
    color: #888;
    background-color: #eee;
    text-align: center;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 6px;
}

.select_box{
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}
.car_info{
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.car_info_name{
    color: #666;
    width: 200px;
    text-align: center;
}
.car_info_input{
    width: 460px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
}
.car_info_textarea {
    font-size: 30px;
    width: 460px;
    height: 140px;
    margin-top: 10px;
    /* padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px; */
    color: #666;
    border-width: 2px;
    border-style: solid;
    border-color: #666;
    border-radius: 5px;
  }
.car_code_input{
    width: 260px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
    margin-right: 30px;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
</style>
